<template>
	<view class="content">
		<nav-top :showType='1'></nav-top>
		<view class="content-title">
			<view>
				油价设置
			</view>
		</view>
		<view class="content-box">
			<van-form @submit="onSubmit">
				<view class="item-box">
					<view>分类</view>
					<view>指导价</view>
					<view>优惠价</view>
				</view>

				<view class="item-box" v-for="(item,index) in list">
					<view class="border-box">{{ item.fuelTypeName }}</view>
					<view class="border-box">
						<van-field v-if="item.fuelTypeId == 1" v-model="fromData.cost92" size="normal" center type="number" />
						<van-field v-if="item.fuelTypeId == 2" v-model="fromData.cost95" size="normal" center type="number" />
						<van-field v-if="item.fuelTypeId == 3" v-model="fromData.cost98" size="normal" center type="number" />
						<van-field v-if="item.fuelTypeId == 4" v-model="fromData.cost0" size="normal" center type="number" />
					</view>
					<view class="border-box">
						<van-field v-if="item.fuelTypeId == 1"  v-model="fromData.discount92" size="normal" center type="number" />
						<van-field v-if="item.fuelTypeId == 2"  v-model="fromData.discount95" size="normal" center type="number" />
						<van-field v-if="item.fuelTypeId == 3"  v-model="fromData.discount98" size="normal" center type="number" />
						<van-field v-if="item.fuelTypeId == 4"  v-model="fromData.discount0" size="normal" center type="number" />
					</view>
				</view>
				
				<view class="submit">
					<van-button round block type="primary" native-type="submit" size="normal">
						提交
					</van-button>
				</view>
			</van-form>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		watch,
		watchEffect,
		onMounted
	} from 'vue'
	import NavTop from '@/components/NavTop.vue'
	import api from '@/api/priceSetting.js'
	import $store from "@/store";
	export default {
		props: {},
		components: {
			NavTop
		},
		setup(props, ctx) {
			const data = reactive({
				list: [],
				fromData: {
					cost92: '',
					discount92: '',
					cost95: '',
					discount95: '',
					cost98: '',
					discount98: '',
					cost0: '',
					discount0: '',
				}
			})
			const getList = () => {
				api.list({
					gasStationId: $store.state.areaId, //加油站id
				}).then(res => {
					data.list = res.rows;
					data.list.forEach(val => {
						if(val.fuelTypeId == 1 && val.listPrice) {
							data.fromData.cost92 = val.listPrice
							data.fromData.discount92 = val.price
						}else if(val.fuelTypeId == 2 && val.listPrice) {
							data.fromData.cost95 = val.listPrice
							data.fromData.discount95 = val.price
						}else if(val.fuelTypeId == 3 && val.listPrice) {
							data.fromData.cost98 = val.listPrice
							data.fromData.discount98 = val.price
						}else if(val.fuelTypeId == 4 && val.listPrice) {
							data.fromData.cost0 = val.listPrice
							data.fromData.discount0 = val.price
						}
					})
				})
			}
			onMounted(() => {
				getList()
			})
			const postPrice = (post) => {
				api.price(post).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
				})
			}
			watch($store.state, (newVal, oldVal) => {
				if(newVal.areaId) {
					getList()
				}
			}, {
				deep: true
			})
			watchEffect(() => {
			})
			const onSubmit = () => {
				if(data.fromData.cost92 && data.fromData.discount92) {
					let postData = {
						gasStationId: $store.state.areaId, //加油站id
						fuelTypeId: 1, //燃料类型ID
						listPrice: data.fromData.cost92, //指导价
						price: data.fromData.discount92, //优惠价
					}
					postPrice(postData)
				}
				if(data.fromData.cost95 && data.fromData.discount95) {
					let postData = {
						gasStationId: $store.state.areaId, //加油站id
						fuelTypeId: 2, //燃料类型ID
						listPrice: data.fromData.cost95, //指导价
						price: data.fromData.discount95, //优惠价
					}
					postPrice(postData)
				}
				if(data.fromData.cost98 && data.fromData.discount98) {
					let postData = {
						gasStationId: $store.state.areaId, //加油站id
						fuelTypeId: 3, //燃料类型ID
						listPrice: data.fromData.cost98, //指导价
						price: data.fromData.discount98, //优惠价
					}
					postPrice(postData)
				}
				if(data.fromData.cost0 && data.fromData.discount0) {
					let postData = {
						gasStationId: $store.state.areaId, //加油站id
						fuelTypeId: 4, //燃料类型ID
						listPrice: data.fromData.cost0, //指导价
						price: data.fromData.discount0, //优惠价
					}
					postPrice(postData)
				}
				
			}
			return {
				...toRefs(data),
				onSubmit
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #eee;
		overflow: hidden;

		.content-title {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			padding-top: 20rpx;
			background-color: #fff;
		}

		.content-box {
			width: 100%;
			padding: 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			background-color: #eee;

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 20rpx;

				.border-box {
					display: flex;
					justify-content: center;
					width: 20%;
					height: 60rpx;
					box-shadow: 0 0 22rpx 0 rgba(0, 0, 0, .1);
					border-radius: 22rpx;
					&:nth-of-type(1) {
						box-shadow: none;
						border-radius: 0;
					}
					.van-cell {
						padding: 0 10rpx;
						border-radius: 10rpx;
					}
				}
			}

			.submit {
				width: 40%;
				margin: 60rpx auto 0;
			}
		}
	}
</style>